<template>
    <div class="view-fill">
      <div
        v-if="!modifyInfo.visible && !enableInfo.visible && !disableInfo.visible"
        class="app-container-flex"
      >
        <NewFullScreen
          v-model="showDialog"
          :title="title"
          :need-return="false"
          :btn-list="fullInfo.btnList"
          @returnBack="returnBack"
        >
          <template v-slot:full-button>
            <el-button
              v-if="
                $permission('equipmentUpDown:update') &&
                infoList.data.status == 1
              "
              @click="update"
              >修改</el-button
            >
            <el-button
              v-if="
                $permission('equipmentUpDown:start') &&
                infoList.data.status == 1
              "
              @click="chenckEnabledUseManage"
              >启动</el-button
            >
            <el-button
              v-if="
                $permission('equipmentUpDown:stop') &&
                infoList.data.status == 2
              "
              @click="checkDisabledUseManage"
              >停止</el-button
            >
            <el-button
              v-if="
                $permission('equipmentUpDown:cancle') &&
                infoList.data.status == 2
              "
              @click="checkcanalUseManage"
              >作废</el-button
            >
          </template>
          <div id="table-list">
            <div class="model-panel">
              <div class="model-panel-title">
                <p>{{ $t('basic_information') }}</p>
              </div>
              <div class="model-panel-body">
                <basic-information :info="infoList">
                 
                  <template v-slot:basic-age>
                    {{ infoList.data.age == -2 ?  '-' : infoList.data.age }}
                  </template>
                </basic-information>
              </div>
            </div>
          </div>
        </NewFullScreen>
      </div>
      <OrderModify
        v-if="modifyInfo.visible"
        :id="modifyInfo.id"
        v-model:visible="modifyInfo.visible"
        :title="modifyInfo.title"
        @returnModify="getMain"
      />
      <enable
        v-if="enableInfo.visible"
        :data="enableInfo.data"
        v-model:visible="enableInfo.visible"
        :title="enableInfo.title"
        @callback="getMain"
      />
      <disable
        v-if="disableInfo.visible"
        :data="disableInfo.data"
        v-model:visible="disableInfo.visible"
        :title="disableInfo.title"
        @callback="getMain"
      />
    </div>
  </template>
  
  <script setup name="equipmentUpDownDetails">
  import OrderModify from './modify'
  import taskOrderDetail from '@/views/repair/repairManage/patrolTask/details'
  import {
    getUseManageById,
    disabledUseManage,
    enabledUseManage,
    canalUseManage
  } from '@/api/asset.js'
  import enable from './components/enable.vue'
  import disable from './components/disable.vue'
  import BasicInformation from '@/components/BasicInformation/index'
  import commonJson from '@/common/js/commonJson.js'
  
  const { proxy } = getCurrentInstance()
  const emit = defineEmits()
  
  const Tooltip = defineAsyncComponent(() => import('@/components/Tooltip/index'))
  
  const props = defineProps(['visible', 'title', 'tableRowId'])
  const enableInfo = ref({
    visible: false,
    id: '',
    title: '',
    data:{}
  })
  const disableInfo = ref({
    visible: false,
    id: '',
    title: '',
    data:{}
  })
  const infoList = reactive({
    data: {},
    fieldList: [
      { label: '资产名称', value: 'assetName' },
      { label: '资产卡片号', value: 'assetCode' },
      { label: '规格', value: 'standard' },
      { label: '生产厂家', value: 'brandName' },
      { label: '使用科室', value: 'useDeptName' },
      { label: '病人编号', value: 'patientCode' },
      { label: '病人姓名', value: 'patientName' },
      { label: '性别', value: 'sexValue' },
      { label: '年龄', value: 'age', type: 'slot' },
      { label: '预计上机时间', value: 'estimateStartTime' },
      { label: '检查/治疗时间(分钟)', value: 'estimateTreatDuration' },
      { label: '预计下机时间', value: 'estimateEndTime' },
      { label: '实际上机时间', value: 'actualStartTime' },
      { label: '实际下机时间', value: 'actualEndTime' },
      { label: '下机提前提醒(分钟)', value: 'remindBefore' },
      { label: '提醒时间', value: 'remindTime' },
    ],
    mountDayOptions: commonJson.mountDayOptions,
    weekDayOptions: commonJson.weekDayOptions,
  })
  // 过滤相关配置
  const filterInfo = reactive({
    query: {
      queryMap: {
        patrolPlanId: {
          queryType: 'EQUALS',
          queryCategory: 'AND',
          value: null,
        },
      },
      queryParams: {
        deptId: null,
      },
    },
  })
  const fullInfo = reactive({
    btnList: [
      { value: 'button', type: 'slot' },
      { label: '返回', event: returnBack, show: true },
    ],
  })
  const modifyInfo = reactive({
    visible: false,
    title: '修改设备启停',
    id: '',
  })
  
  const showDialog = computed({
    get() {
      return props.visible
    },
    set(newValue) {
      // 更新父组件visible
      emit('update:visible', newValue)
    },
  })

  onMounted(() => {
    getMain()
  })
  
  function returnBack() {
    //返回
    showDialog.value = false
    emit('returnBack')
  }
  function update() {
    modifyInfo.visible = true
    modifyInfo.id = infoList.data.id
  }
  function chenckEnabledUseManage() {
    enableInfo.value.visible = true
    enableInfo.value.title = '设备启动'
    enableInfo.value.data = infoList.data
  }
  function checkDisabledUseManage() {
    disableInfo.value.visible = true
    disableInfo.value.title = '设备停用'
    disableInfo.value.data = infoList.data
  }
  function checkcanalUseManage() {
    canalUseManage(infoList.data).then((res) => {
      if (res.success && res) {
        getMain()
      }
    })
  }

  function getMain() {
    getUseManageById(props.tableRowId).then((resp) => {
      if (resp && resp.success) {
        let data = resp.data
        infoList.data = data

      }
    })
  }
  </script>
  
  <style scoped lang="scss">
  .flex {
    display: flex;
    flex: 1;
  }
  .flex-select :deep(.el-input--small .el-input__inner) {
    height: 28px !important;
  }
  :deep(.patrolPlan-checkbox) {
    padding: 0 5px 5px 5px;
    box-sizing: border-box;
    .el-checkbox-button__inner {
      width: 30px;
      height: 30px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  :deep(.el-checkbox-button__inner) {
    border: 1px solid #dcdfe6 !important;
  }
  </style>
  